<template>
  <base-modal 
    :show.sync="visible"
    :title="$t('frameHeader.userFeedback.recordFeedback')"
    class="user-feedback-dialog"
    width="680px"
    v-loading="loading || typesLoading"
  >
    <div class="feedback-list" v-if="list.length>0">
      <!--列表显示-->
      <div
        class="users-feedback-main"
        v-for="(item, index) in list"
        :key="`${index}_feedback`">
        <div class="user-feedback-left">
          <div class="form-view-row type-more" v-if="item.feedbackType.length!=0">
            <span
              class="feedback-type-content"
              v-for="(type,index) in item.feedbackTypes"
              :key="index">
              <i :class="['iconfont',type.img] "></i>{{type.content}}
            </span>
          </div>
          <div class="form-view-row" v-if="item.module.length!=0">
            <label class="item-title">{{$t('frameHeader.userFeedback.functionModule')}}:</label>
            <div><span class="item-content" v-for="(value, index) in item.module" :key="index">{{value}}<i v-if="index!=(item.module.length-1)">, </i></span></div>
          </div>
          <div class="form-view-row">
            <label class="item-title">{{$t('frameHeader.userFeedback.feedbackContent')}}:</label>
            <div class="item-content">{{item.feedbackContent.content}}</div>
          </div>
          <div class="form-view-row" v-if="item.phone!=''">
            <label class="item-title">{{$t('common.label.contactMethod')}}:</label>
            <div class="item-content">{{item.phone}}</div>
          </div>
        </div>
        <div class="user-feedback-right">
          <p>{{item.createTime | fmt_date}}</p>
          <div
            class="feedback-file-preview"
            v-if="item.imageUrl">
            <el-image
              :src="item.imageUrl"
              class="feedback-file-image"
              @click="previewAllImg(item.imageUrl, item.feedbackContent.pictures)"
            ></el-image>
            <a
              v-if="item.countImage"
              @click="previewAllImg(item.imageUrl, item.feedbackContent.pictures)">+{{item.countImage}}
            </a>
          </div>
        </div>
      </div>
      <!--加载更多-->
      <div class="feedback-list-loadmore link-text task-pointer" v-if="hasNextPage">
        <span @click="loadmore">{{$t('common.base.tip.loadMore')}}</span>
      </div>
    </div> 
    <div class="feedback-list" v-else>
      <div class="list empty">
        <img class="empty-img" :src="noDataImage" />
        <span class="empty-msg">{{$t('frameHeader.userFeedback.noDataSubmitFeedback')}}</span>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="closeDialog">{{ $t('common.base.close')}}</el-button>
      <el-button type="primary" @click="toCreateFeedback">{{$t('frameHeader.userFeedback.submitFeedback')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import http from '@src/util/http';
import moment from 'moment';
import i18n from '@src/locales';
import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
export default {
  name: 'feed-back-list',
  data () {
    return {
      noDataImage,
      visible: false,
      list: [],
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      hasNextPage: true,
      loading: false,
      typesLoading: false,
    }
  },
  methods: {
    loadmore() {
      if(this.hasNextPage) {
        this.fetchFeedbackList(true);
      }  
    },
    previewAllImg(url, pictures) {
      let urls = pictures.map((item) => {
        return item.url
      });
      this.$previewElementImg(url, urls)
    },
    dataComputed(result) {
      let list = JSON.parse(JSON.stringify(result))
      list.forEach((item) => {
        // 渲染图片
        if(item.feedbackContent.pictures.length !== 0) {
          this.$set(item, 'imageUrl', item.feedbackContent.pictures[0].url)
          if(item.feedbackContent.pictures.length > 1) {
            this.$set(item, 'countImage', (item.feedbackContent.pictures.length - 1))
          }
        }
        // 渲染反馈类型
        let feedbackTypes = item.feedbackType.map((type) => {
          let item = {}
          item.img = type === '性能体验' ? 'icon-dashboard' 
            : (type === '功能异常' ? 'icon-alert' 
              : (type === '产品建议' ? 'icon-bulb' 
                : (type === '其他' ? 'icon-appstore' : '')));
          item.content = type
          return item;
        })
        this.$set(item, 'feedbackTypes', feedbackTypes);
      })
      this.list = list;
    },
    openDialog () {
      this.visible = true;
    },
    closeDialog () {
      this.visible = false
    }, 
    async fetchFeedbackList (isLoadmore) {
      this.typesLoading = true;
      this.searchParams.pageNum ++;
      if(!isLoadmore) this.searchParams.pageNum = 1;
      
      let params = {
        ...this.searchParams,
      }
      try {
        let res = await http.get('/api/app/outside/feedback/getFeedbackList', params);
        this.typesLoading = false;
        if(res.success) {
          let data = res.result?.list || [];
          if(isLoadmore) {
            this.list = this.list.concat(data);
          } else {
            let lcale = '';
            if (i18n.locale!=='zh') 
              lcale='YYYY MMM DD'
            else
              lcale = 'YYYY-MM-DD'
            data.forEach(item => {
              item.createTime=moment(item.createTime).format(lcale)
            });
            this.list = data
          }
          this.hasNextPage = res.result.hasNextPage;
          this.dataComputed(this.list) 
        }
      } catch (error) {
        this.typesLoading = false;
        console.error(error);
      }
    },
    toCreateFeedback() {
      this.visible = false;
      this.$emit('createFeedback');
    }
  },
  watch: {
    visible(val) {
      if(val) {
        this.$nextTick(() => {
          this.fetchFeedbackList()
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.feedback-list {
  height: calc(100% - 30px);
}
  .feedback-list-loadmore{
    line-height: 36px;
    text-align: center;
    a {
      color: #3c8dbc;
    }
  }
.users-feedback-main {
  padding: 12px 20px 12px 20px;
  display: flex;
  border-bottom: 1px solid #E8E8E8;
}
  .user-feedback-left {
    width: 485px;
  }
    .type-more {
      padding-bottom: 8px !important;
    }
    .form-view-row {
      align-items: flex-start;
      padding: 0 0 6px 0;
    }
      .item-title {
        width: auto;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #595959;
        line-height: 22px;
      }
      .item-content {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #262626;
        line-height: 22px;
        word-break: break-all;
      }
      .feedback-type-content {
        margin-right: 14px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FAAD14;
        line-height: 22px;
        i {
          margin-right: 5px;
        }
      }
  .user-feedback-right {
    width: 155px;
    p {
      text-align: right;
      height: 22px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8C8C8C;
      line-height: 22px;
      margin-bottom: 0;
    }
    .feedback-file-preview {
      width: 100%;
      height: 56px;
      margin-top: 8px;
      display: flex;
      justify-content: center;
      position: relative;
      .feedback-file-image {
        width: 56px;
      }
      a {
        position: absolute;
        left: 118px;
        top: 36px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #262626;
        cursor: pointer;
      }
    }
  }
.empty {
  text-align: center;
  .empty-img {
    width: 160px;
    height: 160px;
    margin-top: 110px;
  }

  .empty-msg {
    display: block;
    font-size: 14px;
    height: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: $text-color-regular;
    line-height: 22px;
    margin-top: 8px;
    margin-bottom: 110px;
  }
}
</style>